<template>
  <!-- 房屋配置 -->
  <div class="house-detail-about">
    <div class="house-title">房屋配置</div>
    <div class="about-package-item">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="(item, index) in mySupportingList"
          :key="index"
          :text="item.text"
        >
          <template #icon>
            <i class="iconfont" :class="item.icon"></i>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailAbout',
  props: {
    supporting: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      desc: [
        { text: '衣柜', icon: 'icon-wardrobe' },
        { text: '洗衣机', icon: 'icon-wash' },
        { text: '空调', icon: 'icon-air' },
        { text: '天然气', icon: 'icon-gas' },
        { text: '冰箱', icon: 'icon-ref' },
        { text: '暖气', icon: 'icon-Heat' },
        { text: '电视', icon: 'icon-vid' },
        { text: '热水器', icon: 'icon-heater' },
        { text: '宽带', icon: 'icon-broadband' },
        { text: '沙发', icon: 'icon-sofa' }
      ]
    }
  },
  computed: {
    mySupportingList() {
      return this.desc.filter((item) => this.supporting.includes(item.text))
    }
  }
}
</script>

<style scoped lang="less">
.house-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 10px;
  padding: 15px 0;
  border-bottom: 1px solid #cecece;
}
.house-detail-about {
  margin-bottom: 10px;
  padding: 0 10px;
  background: #fff;
  .about-package-item {
    .van-grid-item__text {
      font-size: 14px;
      color: #333;
    }
    .iconfont {
      color: #333;
      font-size: 23px;
    }
  }
}
</style>
